<div id="main-menu">

    <div class="logo">
      <img
          ng-src="{{mainMenu.variantAssetsUrl}}/graphics/{{mainMenu.variant}}-logo.png"
          alt="{{mainMenu.themeManager.variant}}-logo"
          ui-sref="redirect"/>
    </div>

    <div ng-if="mainMenu.isAuthActive()" class="myvolumio-card-container">
        <my-volumio-user-card>
        </my-volumio-user-card>
    </div>

    <div class='main-menu-list-container'>
      <ul class="main-menu-list">
        <!--
          <li class="active">
            <a ui-sref="volumio.home" >
              <i class="fa fa-home"></i>
              <span translate='COMMON.HOME'></span>
            </a>
          </li>
          <li>
            <a ui-sref="volumio.browse">
              <i class="fa fa-list"></i>
              <span translate='COMMON.TAB_BROWSE'></span>
            </a>
          </li>
          <li>
            <a ui-sref="volumio.search">
              <i class="fa fa-search"></i>
              <span translate='COMMON.SEARCH'></span>
            </a>
          </li>

          <div class="spacer"></div>-->
          <li ng-class="{active: source.active}" ng-repeat='source in mainMenu.sources track by source.uri'>
            <a href ng-click="mainMenu.goTo(source)" >
              <!--
              <i ng-if='source.icon && !source.albumart' class="{{source.icon}}"></i>
              <img ng-if='source.albumart' src='{{source.albumart}}' style='width: 32px; height: 32px;' />
              -->
              {{source.name}}

            <span ng-if="source.uri === 'music-library' && mainMenu.playerService.state.updatedb"> <i class="fa fa-refresh fa-spin"></i></span>
            <span class="static-source-icon" ng-if="source.static && source.active"><i class="material-icons">radio_button_checked</i></span>
            <span class="static-source-icon" ng-if="source.static && !source.active"><i class="material-icons">radio_button_unchecked</i></span>
            </a>
          </li>
          <!-- Temporarily disabled
          <div ng-if="!mainMenu.premiumEnabled" class="spacer"></div>
          <li ng-if="!mainMenu.premiumEnabled">
            <p class="small d-flex align-items-center">
              <img class="mr-2" src="app/assets-common/myvolumio-avatar--small.svg" alt="Myvolumio icon">
              {{ 'MYVOLUMIO.MY_VOLUMIO' | translate }}
            </p>
          </li>
          <li ng-if="!mainMenu.premiumEnabled">
            <a href ng-click="mainMenu.menuItemsMyVolumioLinksClick('qobuz')">
              Qobuz
            </a>
          </li>
          <li ng-if="!mainMenu.premiumEnabled">
            <a href ng-click="mainMenu.menuItemsMyVolumioLinksClick('tidal')">
              Tidal
            </a>
          </li>
          <li ng-if="!mainMenu.premiumEnabled">
            <a href ng-click="mainMenu.menuItemsMyVolumioLinksClick('highresaudio')">
              High Res Audio
            </a>
          </li>
          -->

          <div class="spacer"></div>
          <li>
            <a ui-sref="volumio.settings">
              <!--<i class="fa fa-cog"></i>-->
              <span translate="COMMON.SETTINGS"></span>
            </a>
          </li>
          <li ng-repeat='item in mainMenu.menuItemsMainMenuLinks track by item.name'>
            <a href ng-click="mainMenu.menuItemsMainMenuLinksClick(item)" >
              <!--
              <i ng-if='source.icon && !source.albumart' class="{{source.icon}}"></i>
              <img ng-if='source.albumart' src='{{source.albumart}}' style='width: 32px; height: 32px;' />
              -->
              {{item.name}}
            </a>
          </li>
          <!--
          <li>
            <a ui-sref="volumio.help">
              <i class="fa fa-question"></i>
              Help </a>
            </li>
            -->
      </ul>

    </div>

</div>
